<template>
  <div class="_wz_cent_main _wz_expirationReminder">
    <Row :gutter="10" style="height:96px;">
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.insurance?managementStatistics.insurance.insuranceAllCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">保险机务档案</div>
        </Card>
      </i-col>
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.maintain?managementStatistics.maintain.maintainAllCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">维保机务档案</div>
        </Card>
      </i-col>
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.terminal?managementStatistics.terminal.terminalAllCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">北斗机务档案</div>
        </Card>
      </i-col>
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.operationCertificate?managementStatistics.operationCertificate.operationCertificateAllCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">营运机务档案</div>
        </Card>
      </i-col>
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.scrap?managementStatistics.scrap.scrapAllCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">报废机务档案</div>
        </Card>
      </i-col>
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.transfer?managementStatistics.transfer.transferAllCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">过户机务档案</div>
        </Card>
      </i-col>
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.annualInspect?managementStatistics.annualInspect.annualInspectAllCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">年检机务档案</div>
        </Card>
      </i-col>
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.trailerVesselTax?managementStatistics.trailerVesselTax.trailerVesselTaxAllCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">车船税机务档案</div>
        </Card>
      </i-col>
      <i-col span="24" style="width: calc(100% / 9);">
        <Card dis-hover shadow style="text-align: center;padding: 10px 0;">
          <div style="font-size: 18px;line-height: 30px;height: 30px;color: #2d8cf0;">
            {{!!managementStatistics.vehicleAccident?managementStatistics.vehicleAccident.vehicleAccidentCount:0}}
          </div>
          <div style="font-size: 14px;line-height: 30px;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">事故机务档案</div>
        </Card>
      </i-col>
    </Row>

    <Row :gutter="10" style="height:calc((100% - 96px - 10px - 10px) /2);margin: 10px 0;margin-left: -5px;margin-right: -5px;">
      <i-col span="8" style="height: 100%;">
        <Card dis-hover  style="height:  100%;">
          <p slot="title">保险机务档案</p>
          <Row :gutter="10" style="margin: 10px 0;border-bottom: 1px solid #e8eaec;padding: 10px 0;">
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!managementStatistics.insurance?managementStatistics.insurance.insuranceExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">已到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border: 1px solid #e8eaec;border-top: 0px;border-bottom: 0px; ">
              <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!managementStatistics.insurance?managementStatistics.insurance.insuranceDueExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">即将到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border-right: 1px solid #e8eaec;">
              <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!managementStatistics.insurance?managementStatistics.insurance.insuranceUnExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">正常</div>
            </i-col>
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #2d8cf0;line-height: 30px;">{{!!managementStatistics.insurance?managementStatistics.insurance.insuranceUnRemindCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">忽略提醒</div>
            </i-col>
          </Row>
          <div style="height: calc(100% - 81px - 20px);">
            <div style="height:100%;" ref="bingTuHBott">
              <bingTu :topHeight="bingTuHBottHeight" v-if="bingTuHBottHeight != 0 && insurance.insuranceType" :bingTuData="insurance"></bingTu>
            </div>
          </div>
        </Card>
      </i-col>



      <i-col span="8" style="height: 100%;">
        <Card dis-hover  style="height:  100%;">
          <p slot="title">维保机务档案</p>
          <Row :gutter="10" style="margin: 10px 0;border-bottom: 1px solid #e8eaec;padding: 10px 0;">
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!managementStatistics.maintain?managementStatistics.maintain.maintainExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">已到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border: 1px solid #e8eaec;border-top: 0px;border-bottom: 0px; ">
              <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!managementStatistics.maintain?managementStatistics.maintain.maintainDueExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">即将到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border-right: 1px solid #e8eaec;">
              <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!managementStatistics.maintain?managementStatistics.maintain.maintainUnExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">正常</div>
            </i-col>
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #2d8cf0;line-height: 30px;">{{!!managementStatistics.maintain?managementStatistics.maintain.maintainUnRemindCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">忽略提醒</div>
            </i-col>
          </Row>
          <div style="height: calc(100% - 81px - 20px);">
            <div style="height:100%;" ref="bingTuHBott">
              <bingTu :topHeight="bingTuHBottHeight" v-if="bingTuHBottHeight != 0 && maintain.maintainType" :bingTuData="maintain"></bingTu>
            </div>
          </div>
        </Card>
      </i-col>



      <i-col span="8" style="height: 100%;">
        <Card dis-hover  style="height:  100%;">
          <p slot="title">北斗机务档案</p>
          <Row :gutter="10" style="margin: 10px 0;border-bottom: 1px solid #e8eaec;padding: 10px 0;">
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!managementStatistics.terminal?managementStatistics.terminal.terminalExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">已到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border: 1px solid #e8eaec;border-top: 0px;border-bottom: 0px; ">
              <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!managementStatistics.terminal?managementStatistics.terminal.terminalDueExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">即将到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border-right: 1px solid #e8eaec;">
              <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!managementStatistics.terminal?managementStatistics.terminal.terminalUnExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">正常</div>
            </i-col>
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #2d8cf0;line-height: 30px;">{{!!managementStatistics.terminal?managementStatistics.terminal.terminalUnRemindCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">忽略提醒</div>
            </i-col>
          </Row>
          <div style="height: calc(100% - 81px - 20px);">
            <div style="height:100%;" ref="bingTuHBott">
              <bingTu :topHeight="bingTuHBottHeight" v-if="bingTuHBottHeight != 0 && terminal.terminalType" :bingTuData="terminal"></bingTu>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>

    <Row :gutter="10" style="height:calc((100% - 96px - 10px - 10px) /2);">
      <i-col span="8" style="height: 100%;">
        <Card dis-hover  style="height:  100%;">
          <p slot="title">营运机务档案</p>
          <Row :gutter="10" style="margin: 10px 0;border-bottom: 1px solid #e8eaec;padding: 10px 0;">
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!managementStatistics.operationCertificate?managementStatistics.operationCertificate.operationCertificateExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">已到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border: 1px solid #e8eaec;border-top: 0px;border-bottom: 0px; ">
              <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!managementStatistics.operationCertificate?managementStatistics.operationCertificate.operationCertificateDueExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">即将到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border-right: 1px solid #e8eaec;">
              <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!managementStatistics.operationCertificate?managementStatistics.operationCertificate.operationCertificateUnExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">正常</div>
            </i-col>
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #2d8cf0;line-height: 30px;">{{!!managementStatistics.operationCertificate?managementStatistics.operationCertificate.operationCertificateUnRemindCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">忽略提醒</div>
            </i-col>
          </Row>
          <div style="height: calc(100% - 81px - 20px);">
            <div style="height:100%;" ref="bingTuHBott">
              <bingTu :topHeight="bingTuHBottHeight" v-if="bingTuHBottHeight != 0 && operationCertificate.operationCertificateType" :bingTuData="operationCertificate"></bingTu>
            </div>
          </div>
        </Card>
      </i-col>



      <i-col span="8" style="height: 100%;">
        <Card dis-hover  style="height:  100%;">
          <p slot="title">年检机务档案</p>
          <Row :gutter="10" style="margin: 10px 0;border-bottom: 1px solid #e8eaec;padding: 10px 0;">
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!managementStatistics.annualInspect?managementStatistics.annualInspect.annualInspectExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">已到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border: 1px solid #e8eaec;border-top: 0px;border-bottom: 0px; ">
              <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!managementStatistics.annualInspect?managementStatistics.annualInspect.annualInspectDueExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">即将到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border-right: 1px solid #e8eaec;">
              <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!managementStatistics.annualInspect?managementStatistics.annualInspect.annualInspectUnExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">正常</div>
            </i-col>
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #2d8cf0;line-height: 30px;">{{!!managementStatistics.annualInspect?managementStatistics.annualInspect.annualInspectUnRemindCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">忽略提醒</div>
            </i-col>
          </Row>
          <div style="height: calc(100% - 81px - 20px);">
            <div style="height:100%;" ref="bingTuHBott">
              <bingTu :topHeight="bingTuHBottHeight" v-if="bingTuHBottHeight != 0 && annualInspect.annualInspectType" :bingTuData="annualInspect"></bingTu>
            </div>
          </div>
        </Card>
      </i-col>



      <i-col span="8" style="height: 100%;">
        <Card dis-hover  style="height:  100%;">
          <p slot="title">车船税机务档案</p>
          <Row :gutter="10" style="margin: 10px 0;border-bottom: 1px solid #e8eaec;padding: 10px 0;">
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!managementStatistics.trailerVesselTax?managementStatistics.trailerVesselTax.trailerVesselTaxExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">已到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border: 1px solid #e8eaec;border-top: 0px;border-bottom: 0px; ">
              <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!managementStatistics.trailerVesselTax?managementStatistics.trailerVesselTax.trailerVesselTaxDueExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">即将到期</div>
            </i-col>
            <i-col span="6" style="text-align: center;border-right: 1px solid #e8eaec;">
              <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!managementStatistics.trailerVesselTax?managementStatistics.trailerVesselTax.trailerVesselTaxUnExpireCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">正常</div>
            </i-col>
            <i-col span="6" style="text-align: center;">
              <div style="font-size: 18px;color: #2d8cf0;line-height: 30px;">{{!!managementStatistics.trailerVesselTax?managementStatistics.trailerVesselTax.trailerVesselTaxUnRemindCount:0}}</div>
              <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">忽略提醒</div>
            </i-col>
          </Row>
          <div style="height: calc(100% - 81px - 20px);">
            <div style="height:100%;" ref="bingTuHBott">
              <bingTu :topHeight="bingTuHBottHeight" v-if="bingTuHBottHeight != 0 && trailerVesselTax.trailerVesselTaxType" :bingTuData="trailerVesselTax"></bingTu>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>

    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
  //
  import lineChart2 from "../../../components/Chart/lineChart/lineChart2";
  import bingTu from "../../../components/Chart/lineChart/bingTu";

  export default {
    components: {
      lineChart2,//
      bingTu,
    },
    data() {
      return {
        spinShow:false,//本页加载
        managementStatistics:{},
        bingTuHBottHeight:0,
        insurance:{
          "id": "insurance",
          "data": [],
          "unit": "辆",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          insuranceType: false,
        },
        maintain:{
          "id": "maintain",
          "data": [],
          "unit": "辆",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          maintainType: false,
        },


        terminal:{
          "id": "terminal",
          "data": [],
          "unit": "辆",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          terminalType: false,
        },


        operationCertificate:{
          "id": "operationCertificate",
          "data": [],
          "unit": "辆",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          operationCertificateType: false,
        },


        annualInspect:{
          "id": "annualInspect",
          "data": [],
          "unit": "辆",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          annualInspectType: false,
        },


        trailerVesselTax:{
          "id": "trailerVesselTax",
          "data": [],
          "unit": "辆",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          trailerVesselTaxType: false,
        },



      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;

      that.spinShow = true;
      that.$nextTick(function () {
        that.bingTuHBottHeight = that.$refs.bingTuHBott.offsetHeight;
        window.onresize = function () {
          that.bingTuHBottHeight = that.$refs.bingTuHBott.offsetHeight;

        };
      })


      that.spinShow = true;
      that.axios.post(that.apiUrl.webApi + "/statistics/pc/managementStatistics", {}).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.managementStatistics = res.data.data;


          //保险
          that.insurance.data = [
            {'item': '正常', "percent": that.managementStatistics.insurance.insuranceUnExpireCount},
            {'item': '即将到期', "percent": that.managementStatistics.insurance.insuranceDueExpireCount},
            {'item': '已到期', "percent": that.managementStatistics.insurance.insuranceExpireCount},
            {'item': '忽略提醒', "percent": that.managementStatistics.insurance.insuranceUnRemindCount},
          ];
          that.insurance.insuranceType = true;


          //维保
          that.maintain.data = [
            {'item': '正常', "percent": that.managementStatistics.maintain.maintainUnExpireCount},
            {'item': '即将到期', "percent": that.managementStatistics.maintain.maintainDueExpireCount},
            {'item': '已到期', "percent": that.managementStatistics.maintain.maintainExpireCount},
            {'item': '忽略提醒', "percent": that.managementStatistics.maintain.maintainUnRemindCount},
          ];
          that.maintain.maintainType = true;


          //北斗
          that.terminal.data = [
            {'item': '正常', "percent": that.managementStatistics.terminal.terminalUnExpireCount},
            {'item': '即将到期', "percent": that.managementStatistics.terminal.terminalDueExpireCount},
            {'item': '已到期', "percent": that.managementStatistics.terminal.terminalExpireCount},
            {'item': '忽略提醒', "percent": that.managementStatistics.terminal.terminalUnRemindCount},
          ];
          that.terminal.terminalType = true;


          //营运
          that.operationCertificate.data = [
            {'item': '正常', "percent": that.managementStatistics.operationCertificate.operationCertificateUnExpireCount},
            {'item': '即将到期', "percent": that.managementStatistics.operationCertificate.operationCertificateDueExpireCount},
            {'item': '已到期', "percent": that.managementStatistics.operationCertificate.operationCertificateExpireCount},
            {'item': '忽略提醒', "percent": that.managementStatistics.operationCertificate.operationCertificateUnRemindCount},
          ];
          that.operationCertificate.operationCertificateType = true;


          //年检
          that.annualInspect.data = [
            {'item': '正常', "percent": that.managementStatistics.annualInspect.annualInspectUnExpireCount},
            {'item': '即将到期', "percent": that.managementStatistics.annualInspect.annualInspectDueExpireCount},
            {'item': '已到期', "percent": that.managementStatistics.annualInspect.annualInspectExpireCount},
            {'item': '忽略提醒', "percent": that.managementStatistics.annualInspect.annualInspectUnRemindCount},
          ];
          that.annualInspect.annualInspectType = true;


          //车船税
          that.trailerVesselTax.data = [
            {'item': '正常', "percent": that.managementStatistics.trailerVesselTax.trailerVesselTaxUnExpireCount},
            {'item': '即将到期', "percent": that.managementStatistics.trailerVesselTax.trailerVesselTaxDueExpireCount},
            {'item': '已到期', "percent": that.managementStatistics.trailerVesselTax.trailerVesselTaxExpireCount},
            {'item': '忽略提醒', "percent": that.managementStatistics.trailerVesselTax.trailerVesselTaxUnRemindCount},
          ];
          that.trailerVesselTax.trailerVesselTaxType = true;




        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    methods: {//执行的方法

    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态
      window.onresize = null;
    }
  }
</script>
<style lang="less">
  ._wz_expirationReminder {
    height: 843px!important;
    .ivu-card-body {
      padding: 8px !important;
      height: calc(100% - 51px);
    }
  }


</style>
